<template>
  <a-card :style="{ height: '100%' }">
    <p class="info">全年目标</p>
    <p class="flex justify-end -mt-8">单位：NZD</p>
    <div>
      <p>年度：{{ new Date().getFullYear() }}</p>
      <div class="flex">
        <p>全年目标贷款金额：</p>
        <p v-if="flag">{{ minMoney(YearTarget) }} <a-icon type="edit" @click="edit" /></p>
        <a-input-number
          style="width:200px"
          v-else
          v-model="YearTarget"
          :min="0"
          :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
          :parser="value => `${value}`.replace(/\$\s?|(,*)/g, '')"
          @blur="input"
        />
      </div>
      <div class="flex">
        <div class="blueCircle" />
        &nbsp;
        <p style="margin-top:5px">承诺本金额：{{ minMoney(addAllPrincipal) }}</p>
      </div>
      <div class="flex">
        <div class="orgCircle" />
        &nbsp;
        <p style="margin-top:5px">距离目标金额：{{ minMoney(surplus) }}</p>
      </div>
      <v-chart :forceFit="true" :height="250" :data="sourceData" :scale="scale" class="-ml-10">
        <v-tooltip :showTitle="false" dataKey="item*percent" />
        <v-axis />
        <v-legend dataKey="item" />
        <v-pie position="percent" color="item" :v-style="pieStyle" :label="labelConfig" />
        <v-coord type="theta" />
      </v-chart>
    </div>
  </a-card>
</template>
<script>
import { getCashFlow, createYearTarget } from '@/api/common'
import NP from 'number-precision'
const DataSet = require('@antv/data-set')
export default {
  name: 'AnnualTarget',
  props: [''],
  data() {
    return {
      flag: true,
      YearTarget: 0,
      addAllPrincipal: 0,
      surplus: '',
      // data:[],
      scale: [
        {
          dataKey: 'percent',
          min: 0,
          formatter: '.0%'
        }
      ],
      pieStyle: {
        stroke: '#fff',
        lineWidth: 1
      },
      labelConfig: [
        'percent',
        {
          formatter: (val, item) => {
            return item.point.item + ': ' + val
          }
        }
      ]
    }
  },
  watch: {},
  computed: {
    sourceData() {
      const sourceData = [
        { item: '承诺本金额', count: this.addAllPrincipal },
        { item: '距离目标金额', count: this.surplus }
      ]
      const dv = new DataSet.View().source(sourceData)
      dv.transform({
        type: 'percent',
        field: 'count',
        dimension: 'item',
        as: 'percent'
      })
      return dv.rows
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      await this.getData()
      this.surplus = this.YearTarget ? NP.minus(this.YearTarget, this.addAllPrincipal) : 0
    },
    edit() {
      this.flag = false
    },
    input() {
      this.flag = true
      this.surplus = NP.minus(this.YearTarget, this.addAllPrincipal)
      createYearTarget({ YearTarget: this.YearTarget })
    },
    async getData() {
      const res = await getCashFlow()
      this.YearTarget = res.result.data.YearTarget
      this.addAllPrincipal = res.result.data.addAllPrincipal
    },
    minMoney(v) {
      v = Number(v).toFixed(2)
      return `${v}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    }
  }
}
</script>
<style lang="css" scoped>
.info {
  border-left: 2px solid #1890ff;
  padding-left: 10px;
  font-size: 20px;
}
.blueCircle {
  width: 10px;
  height: 10px;
  border-radius: 25px;
  background-color: #1890ff;
  /* margin: 10px 5px 0 30px; */
  margin-top: 10px;
}
.orgCircle {
  width: 10px;
  height: 10px;
  border-radius: 25px;
  background-color: rgb(54, 203, 203);
  margin-top: 10px;
  /* margin: 10px 5px 0 30px; */
}
</style>
